<template>
  <img v-if="block && $inH5" :src="imgSrc" class="w100p d-b" />
  <u-image
    v-else
    :src="imgSrc"
    :width="width"
    :height="height"
    :mode="mode"
    :radius="radius"
    :show-menu-by-longpress="showMenuByLongpress"
    name="q-icon"
    class="q-icon"
    @click="$emit('click')"
    @error="$emit('error')"
    @load="$emit('load')"
  />
</template>

<script>
export default {
  name: "q-icon",
  props: {
    png: String,
    svg: String,
    src: String,
    w: String,
    h: String,
    size: null,
    block: Boolean,
    mode: {
      type: String,
      default: "aspectFill",
    },
    radius: null,
    showMenuByLongpress: Boolean,
  },
  computed: {
    imgSize() {
      if (this.size > 0) return this.size + "px";
      return this.size;
    },
    width() {
      if (this.w) return this.w;
      if (this.size) return this.imgSize;
      if (this.h && !this.mode) return this.h;
      return undefined;
    },
    height() {
      if (this.h) return this.h;
      if (this.size) return this.imgSize;
      if (this.w && !this.mode) return this.w;
      return undefined;
    },
    imgSrc() {
      if (this.src) return this.src;
      if (this.svg) return `/static/svg/${this.svg}.svg`;
      if (this.png) return `/static/png/${this.png}.png`;
      return null;
    },
  },
};
</script>
